<template>
  <div class="h-100" style="z-index:10">
    <!-- 高 607px -->
    <div class="flex justify-between " style="height:30%">
      <div id="customer-bg" data-bottom class="second-center">
        <page-header text="各类型农用农资使用总量" :ph="182">
          <v-chart ref="glxnynzsyzl" :theme="theme" :options="options" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农用柴油价格走势" :ph="182">
          <v-chart v-if="categoryDiesel.isShow" ref="nycyjgzs" :theme="theme" :options="categoryDiesel" />
        </page-header>
        <!-- </router-link> -->
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.4%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:30%">
      <div data-bottom class="second-sides">
        <!-- <router-link particulars :to="{ name: 'Fourstage', query: { code: '000105', name: 'agricultural', typeCode: '00010502' } }"> -->
        <page-header text="常用化肥价格走势" :ph="182">
          <v-chart v-if="category2.isShow" ref="cyhfjgzs" :theme="theme" :options="category2"
        /></page-header>
        <!-- </router-link> -->
      </div>
      <div data-bottom class="second-sides">
        <!-- <router-link particulars :to="{ name: 'Fourstage', query: { code: '000105', name: 'agricultural', typeCode: '00010504' } }"> -->
        <page-header text="常用农药价格走势" :ph="182">
          <v-chart v-if="categorypesticide.isShow" ref="cynyjgzs" :options="categorypesticide" />
        </page-header>
        <!-- </router-link> -->
      </div>
      <div data-bottom class="second-sides">
        <!-- <router-link particulars :to="{ name: 'Fourstage', query: { code: '000105', name: 'agricultural', typeCode: '00010203' } }"> -->
        <page-header text="常用种子价格走势" :ph="182"> <v-chart v-if="categoryseed.isShow" :theme="theme" :options="categoryseed"/></page-header>
        <!-- </router-link> -->
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.4%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:30%">
      <div data-bottom class="second-sides">
        <page-header text="常用化肥使用量" :ph="182">
          <v-chart v-if="CYHFSYL.isShow" :theme="theme" :options="CYHFSYL" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="常用农药使用量" :ph="182">
          <v-chart v-if="CYNYSYL.isShow" :theme="theme" :options="CYNYSYL" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="常用种子品种使用量" :ph="182">
          <v-chart v-if="CYZZSYL.isShow" :theme="theme" :options="CYZZSYL" />
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import { agriculturalUse, agriculturalPrice, getTowSideStat } from '@/api/connector'
import Particulars from 'header/particulars.vue'
import PageHeader from 'header/PageHeader.vue'
import theme from '@/utils/echarts-theme.json'
import YlTable from 'header/yltable'
import { formatNumber } from '@/utils/app'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'Agricultural',
  components: {
    PageHeader,
    Particulars,
    YlTable
  },
  data() {
    return {
      options: '',
      fertilizer: [],
      seed: [],
      pesticide: [],
      theme: theme,
      menuLevel: 1,
      CYHFSYL: {
        isShow: false,
        tooltip: tooltip('吨', '吨'),
        legend: {
          data: [],
          right: '8%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          name: '吨'
        },
        series: []
      },
      CYNYSYL: {
        isShow: false,
        tooltip: tooltip('袋', '袋'),
        legend: {
          data: [],
          right: '8%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          name: '袋'
        },
        series: []
      },
      CYZZSYL: {
        isShow: false,
        tooltip: tooltip('公斤', '公斤'),
        legend: {
          data: [],
          right: '8%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          name: '公斤'
        },
        series: []
      },
      categorypesticide: {
        isShow: true,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + formatNumber(item.value) + '元/袋</br>'
            })
            return result
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['平均值', '年平均值 ']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2006', '2007', '2008', '2009', '2010']
          }
        ],
        yAxis: [
          {
            name: '元/袋',
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均值',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90]
          },
          {
            name: '年平均值 ',
            type: 'line',
            areaStyle: {},
            data: [220, 182, 191, 234, 290]
          }
        ]
      },
      categoryDiesel: {
        isShow: true,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + formatNumber(item.value) + '元/升</br>'
            })
            return result
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['平均值', '年平均值 ']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2006', '2007', '2008', '2009', '2010']
          }
        ],
        yAxis: [
          {
            name: '元/升',
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均值',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90]
          },
          {
            name: '年平均值 ',
            type: 'line',
            areaStyle: {},
            data: [220, 182, 191, 234, 290]
          }
        ]
      },
      categoryseed: {
        isShow: true,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + '元/公斤</br>'
            })
            return result
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['平均值', '年平均值 ']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2006', '2007', '2008', '2009', '2010']
          }
        ],
        yAxis: [
          {
            name: '元/公斤',
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均值',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90]
          },
          {
            name: '年平均值 ',
            type: 'line',
            areaStyle: {},
            data: [220, 182, 191, 234, 290]
          }
        ]
      },
      category2: {
        isShow: true,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + formatNumber(item.value) + '元/吨</br>'
            })
            return result
          }
        },
        legend: {
          data: ['平均值', '年平均值 ']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2006', '2007', '2008', '2009', '2010']
          }
        ],
        yAxis: [
          {
            name: '元/吨',
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均值',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90]
          },
          {
            name: '年平均值 ',
            type: 'line',
            areaStyle: {},
            data: [220, 182, 191, 234, 290]
          }
        ]
      },
      table: {
        url: '/cybd/api/agri/agriculturalUse/queryList',
        params: {
          type: 'fertilizer'
        },
        columns: [
          {
            prop: 'name',
            label: '名称'
          },
          // {
          //   prop: 'mnufacturers',
          //   label: '生产厂商'
          // },
          // {
          //   prop: 'productSpecifications',
          //   label: '产品规格'
          // },
          {
            prop: 'usageNum',
            label: '使用量'
          },
          {
            prop: 'usagePer',
            label: '用量占比'
          },
          {
            prop: 'remainingNum',
            label: '县库存量'
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getTowSideStat({ groupCode: 'CYHFSYL' }).then((data) => {
        const val = data.body
        const CYHFSYL = this.CYHFSYL
        CYHFSYL.xAxis.data = val.dateSet
        CYHFSYL.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          CYHFSYL.series.push({
            name: item,
            type: 'bar',
            data: val.typeValueListMap[item],
            yAxisIndex: index
          })
        })
        CYHFSYL.isShow = true
      })
      getTowSideStat({ groupCode: 'CYNYSYL' }).then((data) => {
        const val = data.body
        const CYNYSYL = this.CYNYSYL
        CYNYSYL.xAxis.data = val.dateSet
        CYNYSYL.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          CYNYSYL.series.push({
            name: item,
            type: 'bar',
            data: val.typeValueListMap[item],
            yAxisIndex: index
          })
        })
        CYNYSYL.isShow = true
      })
      getTowSideStat({ groupCode: 'CYZZSYL' }).then((data) => {
        const val = data.body
        const CYZZSYL = this.CYZZSYL
        CYZZSYL.xAxis.data = val.dateSet
        CYZZSYL.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          CYZZSYL.series.push({
            name: item,
            type: 'bar',
            data: val.typeValueListMap[item],
            yAxisIndex: index
          })
        })
        CYZZSYL.isShow = true
      })
      // 各类型农用农资使用总量
      getTowSideStat({ groupCode: 'CYNZPZ' }).then((res) => {
        this.cynzpz = res.body
        this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              var result = params[0].name + '<br>'
              params.forEach(function(item) {
                result += item.seriesName + ' : ' + formatNumber(item.value) + '吨</br>'
              })
              return result
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: []
          },
          xAxis: [
            {
              data: [],
              type: 'category'
            }
          ],
          yAxis: [
            {
              name: '吨',
              type: 'value',
              axisTick: {
                show: false
              }
            }
          ],
          series: []
        }
        res.body.typeSet.pop()
        this.options.legend.data = res.body.typeSet
        this.options.xAxis[0].data = res.body.dateSet
        const color = ['#CEB711', '#3BB4FF', '#6647FF', '#19C4A1', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        res.body.typeSet.map((item, index) => {
          this.options.series.push({
            name: item,
            type: 'bar',
            // stack: '总量',
            color: color[index],
            // label: {
            //     show: true
            // },
            data: res.body.typeValueListMap[item]
          })
        })
        this.toLink(this, 'glxnynzsyzl', (params) => {
          console.log(params)
          if (params.seriesName == '农用柴油使用量') {
            this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农用柴油用量', name: 'industrial-base' } })
          }
          if (params.seriesName == '化肥施用量') {
            this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '化肥施用量', name: 'industrial-base' } })
          }
          if (params.seriesName == '饲料使用量') {
            this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '饲料使用量', name: 'industrial-base' } })
          }
          if (params.seriesName == '农药使用量') {
            this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农药使用量', name: 'industrial-base' } })
          }
          if (params.seriesName == '农用塑料薄膜使用量') {
            this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农用塑料薄膜使用量', name: 'industrial-base' } })
          }
        })
      })
      agriculturalPrice({ type: 'fertilizer' }).then((res) => {
        var obj = res.body.data
        var avgPrice = []
        var statDate = []
        var yearAvgPrice = []
        for (var i in obj) {
          avgPrice.push(obj[i].avgPrice)
          statDate.push(obj[i].statDateStr)
          yearAvgPrice.push(obj[i].yearAvgPrice)
        }
        this.category2.xAxis[0].data = statDate
        this.category2.series[0].data = avgPrice
        this.category2.series[1].data = yearAvgPrice
        this.toLink(this, 'cyhfjgzs', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '化肥使用量', name: 'industrial-base' } })
        })
      })
      agriculturalPrice({ type: 'seed' }).then((res) => {
        var obj = res.body.data
        var avgPrice = []
        var statDate = []
        var yearAvgPrice = []
        for (var i in obj) {
          avgPrice.push(obj[i].avgPrice)
          statDate.push(obj[i].statDateStr)
          yearAvgPrice.push(obj[i].yearAvgPrice)
        }
        this.categoryseed.xAxis[0].data = statDate
        this.categoryseed.series[0].data = avgPrice
        this.categoryseed.series[1].data = yearAvgPrice
        // this.toLink(this, 'nycyjgzs', (params) => {
        //   this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农用柴油用量', name: this.$route.name } })
        // })
      })
      agriculturalPrice({ type: 'pesticide' }).then((res) => {
        var obj = res.body.data
        var avgPrice = []
        var statDate = []
        var yearAvgPrice = []
        for (var i in obj) {
          avgPrice.push(obj[i].avgPrice)
          statDate.push(obj[i].statDateStr)
          yearAvgPrice.push(obj[i].yearAvgPrice)
        }
        this.categorypesticide.xAxis[0].data = statDate
        this.categorypesticide.series[0].data = avgPrice
        this.categorypesticide.series[1].data = yearAvgPrice
        this.toLink(this, 'cynyjgzs', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农药使用量', name: 'industrial-base' } })
        })
      })
      agriculturalPrice({ type: 'diesel' }).then((res) => {
        var obj = res.body.data
        var avgPrice = []
        var statDate = []
        var yearAvgPrice = []
        for (var i in obj) {
          avgPrice.push(obj[i].avgPrice)
          statDate.push(obj[i].statDateStr)
          yearAvgPrice.push(obj[i].yearAvgPrice)
        }
        this.categoryDiesel.xAxis[0].data = statDate
        this.categoryDiesel.series[0].data = avgPrice
        this.categoryDiesel.series[1].data = yearAvgPrice
        this.toLink(this, 'nycyjgzs', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000105', typeCode: '农用柴油用量', name: 'industrial-base' } })
        })
      })
    }
  }
}
</script>
<style scoped>
#customer-bg {
  background: url(~@/assets/img/customer-bg.png) no-repeat;
}
.second-center {
  width: 66.06%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.5%;
  color: #fff;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
